<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0"><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />   
        <title>Welcome to Design Zone......</title>
        <link rel="stylesheet" type="text/css" href="../../scripts/ext/resources/css/ext-all.css" />
        <link rel="stylesheet" type="text/css" href="../../styles/dzbase.css" />
        <script type="text/javascript" src="../../scripts/ext/adapter/ext-base.js">
        </script>
        <script type="text/javascript" src="../../scripts/ext/ext-all.js">
        </script>
		
		<script type="text/javascript" src="../../scripts/menu/EditableItem.js"></script>
		<script type="text/javascript" src="../../scripts/menu/RangeMenu.js"></script>
		<script type="text/javascript" src="../../scripts/grid/GridFilters.js"></script>
		<script type="text/javascript" src="../../scripts/grid/filter/Filter.js"></script>
		<script type="text/javascript" src="../../scripts/grid/filter/StringFilter.js"></script>
		<script type="text/javascript" src="../../scripts/grid/filter/ListFilter.js"></script>
		
        <script type="text/javascript" src="../../scripts/i18nMessage.js">
        </script>
        <script type="text/javascript" src="../../scripts/utils.js">
        </script>
		
        <script type="text/javascript">
        	var pgMessage = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=ui.photogallery');
            var message = new i18nMessage('../../servlet/I18nMessageServlet?keyPrefix=message');
			
			var ctCollarTypeXmlLoader = new xmlLoader('../../servlet/CodeTableServlet?name=CtCollarType');
			var ctProductFamilyXmlLoader = new xmlLoader('../../servlet/CodeTableServlet?name=CtProductFamily');
			var ctMaterialTypeXmlLoader = new xmlLoader('../../servlet/CodeTableServlet?name=CtMaterialType');
			var ctPhotoTypeXmlLoader = new xmlLoader('../../servlet/CodeTableServlet?name=CtPhotoType');
			var factoryXmlLoader = new xmlLoader('../../servlet/BiFactoryServlet?action=5');
			
			var ctCollarTypeStore;
			var ctProductFamilyStore;
			var ctMaterialTypeStore;
			var ctPhotoTypeStore;
			var factoryStore;
			
			var ctCollarTypeCombo;
			var ctProductFamilyCombo;
			var ctMaterialTypeCombo;
			var ctPhotoTypeCombo;
			var factoryCombo;
			
			var detailWin;
			
			 var deleteCallback = function(btn){
                if (btn == 'yes') {
                    Ext.Ajax.request({
                        url: '../../servlet/BiPhotoGalleryServlet?action=2&id=' + deleteId,
                        success: function(o){
                            if (o.responseText == 'success') {
                                photoStore.reload();
                                messageTip.msg(message.get('message.tip'), message.get('message.delete.successful'));
                            }
                            else {
                                messageTip.msg(message.get('message.tip'), message.get('message.delete.unsuccessful'));
                            }
                        },
                        failure: function(o){
                            messageTip.msg(message.get('message.tip'), message.get('message.delete.failure'));
                        },
                        params: {
                            foo: 'bar'
                        }
                    });
                }
            }
			
			var filter = function(){
				var itemIndex = 0;
				if(photoStore.getAt(0) && photoStore.getAt(0).data){
					itemIndex = photoStore.getAt(0).data.index - 1;
				}
				photoStore.load({
                    params: {
						start: itemIndex,
                        limit: 10
                    }
                });
			}
			
			var getPhotoTip = function(){
				//'index', 'id', 'reference', 'ctCollarType', 'ctPhotoType', 'ctProductFamily','ctMaterialType', 'jauge',
				//	'weight', 'armure', 'maintenance', 'pilling', 'sizeStability', 'colorStability', 'swatch', 'comment', 'photoName',
				//	'factoryName', 'customerDepartment'
				
				var tip = '';
				tip += '<b>' + pgMessage.get('ui.photogallery.type') + ':</b>&nbsp;&nbsp;&nbsp;&nbsp;{ctPhotoType}<br/>';
				tip += '<b>' + pgMessage.get('ui.photogallery.reference') + ':</b>&nbsp;&nbsp;&nbsp;&nbsp;{reference}<br/>';
				tip += '<b>' + message.get('message.edit.factoryname') + ':</b>&nbsp;&nbsp;&nbsp;&nbsp;{factoryName}&nbsp;&nbsp;{customerDepartment}<br/>';
				tip += '<b>' + message.get('message.edit.materialtype') + ':</b>&nbsp;&nbsp;&nbsp;&nbsp;{ctMaterialType}<br/>';
				tip += '<b>' + message.get('message.edit.productfamily') + ':</b>&nbsp;&nbsp;&nbsp;&nbsp;{ctProductFamily}<br/>';
				tip += '<b>' + message.get('message.edit.collar') + ':</b>&nbsp;&nbsp;&nbsp;&nbsp;{ctCollarType}<br/>';
				tip += '<b>' + message.get('message.edit.jauge') + ':</b>&nbsp;&nbsp;&nbsp;&nbsp;{jauge}<br/>';
				tip += '<b>' + pgMessage.get('ui.photogallery.weight') + ':</b>&nbsp;&nbsp;&nbsp;&nbsp;{weight}<br/>';
				tip += '<b>' + pgMessage.get('ui.photogallery.armure') + ':</b>&nbsp;&nbsp;&nbsp;&nbsp;{armure}<br/>';
				tip += '<b>' + pgMessage.get('ui.photogallery.maintenance') + ':</b>&nbsp;&nbsp;&nbsp;&nbsp;{maintenance}<br/>';
				tip += '<b>' + pgMessage.get('ui.photogallery.pilling') + ':</b>&nbsp;&nbsp;&nbsp;&nbsp;{pilling}<br/>';
				tip += '<b>' + pgMessage.get('ui.photogallery.sizestability') + ':</b>&nbsp;&nbsp;&nbsp;&nbsp;{sizeStability}<br/>';
				tip += '<b>' + pgMessage.get('ui.photogallery.colorstability') + ':</b>&nbsp;&nbsp;&nbsp;&nbsp;{colorStability}<br/>';
				tip += '<b>' + message.get('message.edit.swatch') + ':</b>&nbsp;&nbsp;&nbsp;&nbsp;{swatch}<br/>';
				tip += '<b>' + message.get('message.edit.comment') + ':</b>&nbsp;&nbsp;&nbsp;&nbsp;{comment}<br/>';
				return tip;
			}
            
            Ext.onReady(function(){
                Ext.QuickTips.init();
				
				Ext.form.Field.prototype.msgTarget = 'side';
				
				ctCollarTypeStore = new Ext.data.Store({
                    
                    reader: new Ext.data.XmlReader({
                        record: 'item',
                        id: 'code',
                        totalRecords: 'itemTotal'
                    }, [ 
                    'code', 'description']),
					data: ctCollarTypeXmlLoader.getXml()
                });
				ctCollarTypeStore.insert(0, blankRecord);
				
				ctProductFamilyStore = new Ext.data.Store({
                    reader: new Ext.data.XmlReader({
                        record: 'item',
                        id: 'code',
                        totalRecords: 'itemTotal'
                    }, [ 
                    'code', 'description']),
					data: ctProductFamilyXmlLoader.getXml()
                });
				ctProductFamilyStore.insert(0, blankRecord);
				
				ctMaterialTypeStore = new Ext.data.Store({
                    reader: new Ext.data.XmlReader({
                        record: 'item',
                        id: 'code',
                        totalRecords: 'itemTotal'
                    }, [ 
                    'code', 'description']),
					data: ctMaterialTypeXmlLoader.getXml()
                });
				ctMaterialTypeStore.insert(0, blankRecord);
				
				ctPhotoTypeStore = new Ext.data.Store({
                    reader: new Ext.data.XmlReader({
                        record: 'item',
                        id: 'code',
                        totalRecords: 'itemTotal'
                    }, [ 
                    'code', 'description']),
					data: ctPhotoTypeXmlLoader.getXml()
                });
				ctPhotoTypeStore.insert(0, blankRecord);
				
				factoryStore = new Ext.data.Store({
	                reader: new Ext.data.XmlReader({
	                    record: 'item',
	                    id: 'id',
	                    totalRecords: 'itemTotal'
	                }, ['id', 'name', 'department', 'ctFactoryType']),
	                data: factoryXmlLoader.getXml()
	            });
				factoryStore.insert(0, blankRecord);
				
				ctCollarTypeCombo = new Ext.form.ComboBox({
					fieldLabel: message.get('message.edit.collar'),
					id: 'ctCollarType',
					name: 'ctCollarType',
					editable: false,
				    store: ctCollarTypeStore,
					valueField: 'description',
				    displayField:'description',
				    triggerAction: 'all',
				    emptyText: message.get('message.combo.pleaseselect'),
				    selectOnFocus:true,
					anchor: '90%',
					width: '90%',
					mode: 'local',
					listeners: {
						select: {
							fn: function (thisComb, record,index){
								filter();
							}
						}
					}
				});
				
				ctPhotoTypeCombo = new Ext.form.ComboBox({
					fieldLabel: pgMessage.get('ui.photogallery.type'),
					id: 'ctPhotoType',
					name: 'ctPhotoType',
					editable: false,
				    store: ctPhotoTypeStore,
					valueField: 'description',
				    displayField:'description',
				    triggerAction: 'all',
				    emptyText: message.get('message.combo.pleaseselect'),
				    selectOnFocus:true,
					anchor: '90%',
					width: '90%',
					mode: 'local',
					listeners: {
						select: {
							fn: function (thisComb, record,index){
								filter();
							}
						}
					}
				});
				
				ctProductFamilyCombo = new Ext.form.ComboBox({
					fieldLabel: message.get('message.edit.productfamily'),
					id: 'ctProductFamily',
					name: 'ctProductFamily',
					editable: false,
				    store: ctProductFamilyStore,
					valueField: 'description',
				    displayField:'description',
				    triggerAction: 'all',
				    emptyText: message.get('message.combo.pleaseselect'),
					anchor: '90%',
					width: '90%',
				    selectOnFocus:true,
					mode: 'local',
					listeners: {
						select: {
							fn: function (thisComb, record,index){
								filter();
							}
						}
					}
				});
				
				ctMaterialTypeCombo = new Ext.form.ComboBox({
					fieldLabel: message.get('message.edit.materialtype'),
					id: 'ctMaterialType',
					name: 'ctMaterialType',
					editable: false,
				    store: ctMaterialTypeStore,
					valueField: 'description',
				    displayField:'description',
				    triggerAction: 'all',
				    emptyText: message.get('message.combo.pleaseselect'),
					anchor: '90%',
					width: '90%',
				    selectOnFocus:true,
					mode: 'local',
					listeners: {
						select: {
							fn: function (thisComb, record,index){
								filter();
							}
						}
					}
				});
				
				factoryCombo = new Ext.form.ComboBox({
                    fieldLabel: message.get('message.edit.factoryname'),
                    id: 'factoryId',
                    name: 'factoryId',
                    tpl: '<tpl for="."><div ext:qtip="{ctFactoryType}" class="x-combo-list-item">{name}&nbsp;&nbsp;--&nbsp;&nbsp;{department}</div></tpl>',
                    valueField: 'id',
                    typeAhead: true,
                    store: factoryStore,
                    displayField: 'name',
                    forceSelection: true,
                    triggerAction: 'all',
                    emptyText: message.get('message.combo.pleaseselect'),
					anchor: '90%',
					width: '90%',
                    selectOnFocus: true,
                    mode: 'local',
					listeners: {
						select: {
							fn: function (thisComb, record,index){
								filter();
							}
						}
					}
                });
                
                photoStore = new Ext.data.Store({
                    url: '../../servlet/BiPhotoGalleryServlet?action=4',
                    
                    reader: new Ext.data.XmlReader({
                        record: 'item',
                        id: 'id',
                        totalRecords: 'itemTotal'
                    }, [ 
                    'index', 'id', 'reference', 'ctCollarType', 'ctPhotoType', 'ctProductFamily','ctMaterialType', 'jauge',
					'weight', 'armure', 'maintenance', 'pilling', 'sizeStability', 'colorStability', 'swatch', 'comment', 'photoName',
					'factoryName', 'customerDepartment']),
                    
                    remoteSort: true,
					listeners: {
						beforeload : {
							fn: function(thisStore, options){
								var filterIndex = 0;
								if(ctPhotoTypeCombo.getValue() != ''){
									options['params']['filter[' + filterIndex + '][data][type]'] = 'list';
									options['params']['filter[' + filterIndex + '][data][value]'] = ctPhotoTypeCombo.getValue();
									options['params']['filter[' + filterIndex + '][field]'] = 'ctPhotoType';
									filterIndex ++;
								}
								
								var referenceFilter = Ext.getCmp('reference');
								if(referenceFilter.getValue() != ''){
									options['params']['filter[' + filterIndex + '][data][type]'] = 'string';
									options['params']['filter[' + filterIndex + '][data][value]'] = referenceFilter.getValue();
									options['params']['filter[' + filterIndex + '][field]'] = 'reference';
									filterIndex ++;
								}
								
								if(ctMaterialTypeCombo.getValue() != ''){
									options['params']['filter[' + filterIndex + '][data][type]'] = 'list';
									options['params']['filter[' + filterIndex + '][data][value]'] = ctMaterialTypeCombo.getValue();
									options['params']['filter[' + filterIndex + '][field]'] = 'ctMaterialType';
									filterIndex ++;
								}
								
								if(factoryCombo.getValue() != ''){
									options['params']['filter[' + filterIndex + '][data][type]'] = 'number';
									options['params']['filter[' + filterIndex + '][data][value]'] = factoryCombo.getValue();
									options['params']['filter[' + filterIndex + '][field]'] = 'biFactory.id';
									filterIndex ++;
								}
								
								if(ctProductFamilyCombo.getValue() != ''){
									options['params']['filter[' + filterIndex + '][data][type]'] = 'list';
									options['params']['filter[' + filterIndex + '][data][value]'] = ctProductFamilyCombo.getValue();
									options['params']['filter[' + filterIndex + '][field]'] = 'ctProductFamily';
									filterIndex ++;
								}
								
								if(ctCollarTypeCombo.getValue() != ''){
									options['params']['filter[' + filterIndex + '][data][type]'] = 'list';
									options['params']['filter[' + filterIndex + '][data][value]'] = ctCollarTypeCombo.getValue();
									options['params']['filter[' + filterIndex + '][field]'] = 'ctCollarType';
									filterIndex ++;
								}
								
								var pillingFilter = Ext.getCmp('pilling');
								if(pillingFilter.getValue() != ''){
									options['params']['filter[' + filterIndex + '][data][type]'] = 'string';
									options['params']['filter[' + filterIndex + '][data][value]'] = pillingFilter.getValue();
									options['params']['filter[' + filterIndex + '][field]'] = 'pilling';
									filterIndex ++;
								}
								
								var jaugeFilter = Ext.getCmp('jauge');
								if(jaugeFilter.getValue() != ''){
									options['params']['filter[' + filterIndex + '][data][type]'] = 'number';
									options['params']['filter[' + filterIndex + '][data][value]'] = jaugeFilter.getValue();
									options['params']['filter[' + filterIndex + '][field]'] = 'jauge';
									filterIndex ++;
								}
								
								var sizeStabilityFilter = Ext.getCmp('sizeStability');
								if (sizeStabilityFilter.getValue() != '') {
									options['params']['filter[' + filterIndex + '][data][type]'] = 'string';
									options['params']['filter[' + filterIndex + '][data][value]'] = sizeStabilityFilter.getValue();
									options['params']['filter[' + filterIndex + '][field]'] = 'sizeStability';
									filterIndex++;
								}
								
								var weightFilter = Ext.getCmp('weight');
								if (weightFilter.getValue() != '') {
									options['params']['filter[' + filterIndex + '][data][type]'] = 'string';
									options['params']['filter[' + filterIndex + '][data][value]'] = weightFilter.getValue();
									options['params']['filter[' + filterIndex + '][field]'] = 'weight';
									filterIndex++;
								}
								
								var colorStabilityFilter = Ext.getCmp('colorStability');
								if (colorStabilityFilter.getValue() != '') {
									options['params']['filter[' + filterIndex + '][data][type]'] = 'string';
									options['params']['filter[' + filterIndex + '][data][value]'] = colorStabilityFilter.getValue();
									options['params']['filter[' + filterIndex + '][field]'] = 'colorStability';
									filterIndex++;
								}
								
								var armureFilter = Ext.getCmp('armure');
								if (armureFilter.getValue() != '') {
									options['params']['filter[' + filterIndex + '][data][type]'] = 'string';
									options['params']['filter[' + filterIndex + '][data][value]'] = armureFilter.getValue();
									options['params']['filter[' + filterIndex + '][field]'] = 'armure';
									filterIndex++;
								}	
								
								var swatchFilter = Ext.getCmp('swatch');
								if (swatchFilter.getValue() != '') {
									options['params']['filter[' + filterIndex + '][data][type]'] = 'string';
									options['params']['filter[' + filterIndex + '][data][value]'] = swatchFilter.getValue();
									options['params']['filter[' + filterIndex + '][field]'] = 'swatch';
									filterIndex++;
								}
								
								var maintenanceFilter = Ext.getCmp('maintenance');
								if (maintenanceFilter.getValue() != '') {
									options['params']['filter[' + filterIndex + '][data][type]'] = 'string';
									options['params']['filter[' + filterIndex + '][data][value]'] = maintenanceFilter.getValue();
									options['params']['filter[' + filterIndex + '][field]'] = 'maintenance';
									filterIndex++;
								}								
								
								return true;
							}
						}
					}
                });
            
            	photoStore.setDefaultSort('id', 'desc');
                
                var photoTpl = new Ext.XTemplate(
					'<tpl for=".">',
			            '<div class="thumb-wrap" id="photo{id}">',
					    '<div class="thumb"><img ext:qtip="' + getPhotoTip() + '" src="../../_temp/{photoName}" height="120"></div>',
					    '<span style="float: left;">{name}</span>',
						'<div>&nbsp;&nbsp;<a href="#"><img onclick="window.location=\'photo_gallery_edit.html?id={id}&startPage=\' + (Math.floor(({index} - 1) / 10) + 1);" src="../../images/icons/pencil.png" title="' + message.get('message.list.eidt') + '" /></a>&nbsp;&nbsp;',
					    '<a href="#"><img onclick="deleteItem(deleteCallback, {id});" src="../../images/icons/delete.png" title="' + message.get('message.list.delete') + '"/></a>&nbsp;&nbsp;',
						'<a href="#"><img onclick="window.open(\'../../_temp/{photoName}\');" src="../../images/icons/disk.png" title="' + message.get('message.edit.download') + '"/></a>&nbsp;&nbsp;</div>',
					    '</div></div>',
			        '</tpl>',
			        '<div class="x-clear"></div>'
				);
				
				var photoPanel = new Ext.Panel({
			        id:'images-view',
			        frame:true,
					bodyStyle:'padding:5px 5px 5px 5px;margin-top: 2px;',
			        width:'100%',
					labelWidth: 105,
			        collapsible:true,
			        title: pgMessage.get('ui.photogallery.listtitle'),
			        items: [{
								layout: 'column',
								items: [{
									columnWidth:.2,
					                layout: 'form',
									items: [ctPhotoTypeCombo, ctCollarTypeCombo,{
										xtype:'textfield',
					                    fieldLabel: pgMessage.get('ui.photogallery.pilling'),
										id: 'pilling',
					                    name: 'pilling',
					                    anchor:'86%',
			                			blankText: message.get('message.edit.noblank'),
										maxLength: 64,
										tabIndex: 1,
				                    	listeners: {
				                    		'render': {fn:function(){
										    	Ext.getCmp('pilling').getEl().on('keyup', function(){
										    		filter();
										    	}, this, {buffer:500});
				                    		}, scope:this}
				                    	}	
									}]
								},{
									columnWidth:.2,
					                layout: 'form',
									items: [{
										xtype:'textfield',
					                    fieldLabel: pgMessage.get('ui.photogallery.reference'),
										id: 'reference',
					                    name: 'reference',
					                    anchor:'86%',
			                			blankText: message.get('message.edit.noblank'),
										maxLength: 64,
										tabIndex: 1,
				                    	listeners: {
				                    		'render': {fn:function(){
										    	Ext.getCmp('reference').getEl().on('keyup', function(){
										    		filter();
										    	}, this, {buffer:500});
				                    		}, scope:this}
				                    	}
									},{
										xtype:'numberfield',
					                    fieldLabel: message.get('message.edit.jauge'),
										id: 'jauge',
					                    name: 'jauge',
					                    anchor:'86%',
			                			blankText: message.get('message.edit.noblank'),
										maxLength: 64,
										tabIndex: 1,
				                    	listeners: {
				                    		'render': {fn:function(){
										    	Ext.getCmp('jauge').getEl().on('keyup', function(){
										    		filter();
										    	}, this, {buffer:500});
				                    		}, scope:this}
				                    	}
									},{
										xtype:'textfield',
					                    fieldLabel: pgMessage.get('ui.photogallery.sizestability'),
										id: 'sizeStability',
					                    name: 'sizeStability',
					                    anchor:'86%',
			                			blankText: message.get('message.edit.noblank'),
										maxLength: 64,
										tabIndex: 1,
				                    	listeners: {
				                    		'render': {fn:function(){
										    	Ext.getCmp('sizeStability').getEl().on('keyup', function(){
										    		filter();
										    	}, this, {buffer:500});
				                    		}, scope:this}
				                    	}
									}]
								},{
									columnWidth:.2,
					                layout: 'form',
									items: [ctMaterialTypeCombo,{
										xtype:'numberfield',
					                    fieldLabel: pgMessage.get('ui.photogallery.weight'),
										id: 'weight',
					                    name: 'weight',
					                    anchor:'86%',
			                			blankText: message.get('message.edit.noblank'),
										maxLength: 64,
										tabIndex: 1,
				                    	listeners: {
				                    		'render': {fn:function(){
										    	Ext.getCmp('weight').getEl().on('keyup', function(){
										    		filter();
										    	}, this, {buffer:500});
				                    		}, scope:this}
				                    	}
									},{
										xtype:'textfield',
					                    fieldLabel: pgMessage.get('ui.photogallery.colorstability'),
										id: 'colorStability',
					                    name: 'colorStability',
					                    anchor:'86%',
			                			blankText: message.get('message.edit.noblank'),
										maxLength: 64,
										tabIndex: 1,
				                    	listeners: {
				                    		'render': {fn:function(){
										    	Ext.getCmp('colorStability').getEl().on('keyup', function(){
										    		filter();
										    	}, this, {buffer:500});
				                    		}, scope:this}
				                    	}
									}]
								},{
									columnWidth:.2,
					                layout: 'form',
									items: [factoryCombo,{
										xtype:'textfield',
					                    fieldLabel: pgMessage.get('ui.photogallery.armure'),
										id: 'armure',
					                    name: 'armure',
					                    anchor:'86%',
			                			blankText: message.get('message.edit.noblank'),
										maxLength: 64,
										tabIndex: 1,
				                    	listeners: {
				                    		'render': {fn:function(){
										    	Ext.getCmp('armure').getEl().on('keyup', function(){
										    		filter();
										    	}, this, {buffer:500});
				                    		}, scope:this}
				                    	}	
									},{
										xtype:'textfield',
					                    fieldLabel: message.get('message.edit.swatch'),
										id: 'swatch',
					                    name: 'swatch',
					                    anchor:'86%',
			                			blankText: message.get('message.edit.noblank'),
										maxLength: 64,
										tabIndex: 1,
				                    	listeners: {
				                    		'render': {fn:function(){
										    	Ext.getCmp('swatch').getEl().on('keyup', function(){
										    		filter();
										    	}, this, {buffer:500});
				                    		}, scope:this}
				                    	}		
									}]
								},{
									columnWidth:.2,
					                layout: 'form',
									items: [ctProductFamilyCombo,{
										xtype:'textfield',
					                    fieldLabel: pgMessage.get('ui.photogallery.maintenance'),
										id: 'maintenance',
					                    name: 'maintenance',
					                    anchor:'86%',
			                			blankText: message.get('message.edit.noblank'),
										maxLength: 64,
										tabIndex: 1,
				                    	listeners: {
				                    		'render': {fn:function(){
										    	Ext.getCmp('maintenance').getEl().on('keyup', function(){
										    		filter();
										    	}, this, {buffer:500});
				                    		}, scope:this}
				                    	}		
									}]
								}]
	                    	},new Ext.DataView({
					            store: photoStore,
					            tpl: photoTpl,
					            autoHeight:true,
					            multiSelect: true,
					            overClass:'x-view-over',
					            itemSelector:'div.thumb-wrap',
								cls: 'margin-top: 40px;',
					            listeners: {
					            	dblclick: {
					            		fn: function(dv,nodeIndex){
											 if (!detailWin) {
						                        detailWin = new Ext.Window({
						                            title: message.get('message.window.detail'),
						                            layout: 'fit',
						                            width: 800,
						                            height: 600,
						                            closeAction: 'hide',
													autoScroll: true,
						                            plain: true,
						                            items: [{
						                                id: 'detailPanel',
						                                region: 'center',
						                                bodyStyle: {
						                                    background: '#ffffff',
						                                    padding: '7px'
						                                },
						                                html: message.get('message.window.empty')
						                            }]
						                        });
						                    }
											detailWin.show(this);
											
											var itemTplMarkup = [
												'<img id="customImg" height="500" style="border: 1 solid black;" ext:qtip="' + getPhotoTip() + '" src="../../_temp/{photoName}">',
											];
						                    var itemTpl = new Ext.Template(itemTplMarkup);
						                    var detailPanel = Ext.getCmp('detailPanel');
											itemTpl.overwrite(detailPanel.body, dv.getRecord(dv.getNode(nodeIndex)).data);
											
											new Ext.Resizable('customImg', {
									            wrap:true,
									            pinned:true,
												dynamic:true,
											    handles: 'all',
											    draggable:true
											});
					            		}
					            	}
					            }
					        })],
			        renderTo: 'biPhotoGallery',
                    bbar: new Ext.PagingToolbar({
                        pageSize: 10,
                        store: photoStore,
                        displayInfo: true
                    })
			    });
			
				var startPage = getPrarmeterValue(window.location, 'startPage');
                var start;
                if (startPage == null || startPage == '') {
                    start = 0;
                }
                else {
                    start = (startPage - 1) * 10;
                }
				
				photoStore.beforeload = function(st, op){
					alert("sfsdfsdfsd");
				}
				
				photoStore.load({
                    params: {
                        start: start,
                        limit: 10
                    }
                });
			});
        </script>
</head>
<body>
	<div id="biPhotoGallery"></div>
</body>
</html>